import React from 'react';
import {
  Table,
  Icon,
  Button,
  Tooltip,
  Row,
  Col,
  Tabs,
  Card
} from 'antd';
import MyIcon from '../components/common/MyIcon/MyIcon';





export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  render() {
    const dataSource = [
      {
        key: '1',
        name: '2018-02-15',
        age: '20笔',
        address: '1000元'
      }, {
        key: '2',
        name: '2018-02-15',
        age: '20笔',
        address: '1000元'
      }, {
        key: '3',
        name: '2018-02-15',
        age: '20笔',
        address: '1000元'
      }
    ];

    const columns = [{
      title: '经营状况',
      dataIndex: 'name',
      key: 'name',
      width:'33.3%',
      className:"ant-table-th-center"
    }, {
      title: '订单数量',
      dataIndex: 'age',
      key: 'age',
      width:'33.3%',
      className:"ant-table-th-center"
    }, {
      title: '订单总额',
      dataIndex: 'address',
      key: 'address',
      width:'33.3%',
      className:"ant-table-th-center"
    }];
    return (
      <div className="index">
        <div className="banner">
          <ul>
            <li><img src="/static/images/banner01.png" alt=""/></li>
          </ul>
        </div>
        <Row gutter={16}>
          <Col sm={24} lg={12}>
            <Card title="经营概况" noHovering>
              <Table pagination={false} dataSource={dataSource} columns={columns} bordered/>
            </Card>
          </Col>
          <Col sm={24} lg={12}>
            <Card title="消息通知" noHovering>
              <div className="main-ul">
                <ul>
                  <li>
                    <a className="clearfix" href="#">
                      <span className="left">
                        <MyIcon type="mainMessage"/>
                        您有一笔线索单待跟踪！您有一笔线索单待跟踪！您有一笔线索单待跟踪！您有一笔线索单待跟踪！您有一笔线索单待跟踪！您有一笔线索单待跟踪！
                      </span>
                      <span className="right">立即查看</span>
                    </a>
                  </li>
                  <li>
                    <a className="clearfix" href="#">
                      <span className="left">
                        <MyIcon type="mainMessage"/>
                        您有一笔线索单待跟踪！
                      </span>
                      <span className="right">立即查看</span>
                    </a>
                  </li>
                  <li>
                    <a className="clearfix" href="#">
                      <span className="left">
                        <MyIcon type="mainMessage"/>
                        您有一笔线索单待跟踪！
                      </span>
                      <span className="right">立即查看</span>
                    </a>
                  </li>
                  <li>
                    <a className="clearfix" href="#">
                      <span className="left">
                        <MyIcon type="mainMessage"/>
                        您有一笔线索单待跟踪！
                      </span>
                      <span className="right">立即查看</span>
                    </a>
                  </li>
                  <li>
                    <a className="clearfix" href="#">
                      <span className="left">
                        <MyIcon type="mainMessage"/>
                        您有一笔线索单待跟踪！
                      </span>
                      <span className="right">立即查看</span>
                    </a>
                  </li>
                  <li>
                    <a className="clearfix" href="#">
                      <span className="left">
                        <MyIcon type="mainMessage"/>
                        您有一笔线索单待跟踪！
                      </span>
                      <span className="right">立即查看</span>
                    </a>
                  </li>
                </ul>
              </div>
            </Card>
          </Col>
        </Row>
        <Card title="客户经理" noHovering>
          <div className="contact">
            <h3>系统使用，订单有问题？请联系</h3>
            {/*服务时间：周一至周日 8:00-22:00*/}
            <Row gutter={16}>
              <Col sm={24} lg={12} xl={6}>
                <div className="contact-li">
                  <span className="icon-span"><MyIcon type="mainPhone"/></span>
                  联系电话：400-108-1000
                </div>
              </Col>
              <Col sm={24} lg={12} xl={6}>
                <div className="contact-li">
                  <span className="icon-span"><MyIcon type="mainKefu"/></span>
                  服务时间：周一至周日 8:00-22:00
                </div>
              </Col>
              <Col sm={24} lg={12} xl={6}>
                <div className="contact-li">
                  <span className="icon-span"><MyIcon type="mainQQ"/></span>
                  QQ：840872256
                </div>
              </Col>
              <Col sm={24} lg={12} xl={6}>
                <div className="contact-li">
                  <span className="icon-span"><MyIcon type="mainEmail"/></span>
                  邮箱：840872256@qq.com
                </div>
              </Col>
            </Row>
          </div>
        </Card>
      </div>
    )
  }
}
